<template>
	<view>
		<div class="slider-banner product-bg" :style="boxStyle">
			<swiper 
			indicatorDots="true" 
			interval="3000" 
			:circular="true" 
			:autoplay="ifautoplay" 
			class="swiper-wrapper"
			@change="handleChange" 
			v-if="swiperImages.length > 0"
			>
				<block v-for="(item, index) in swiperImages" :key="index">
					<swiper-item>
						<video
						:id="item.id"
						@timeupdate="timeUpdate"
						@play="playVideo(item.id)"
						v-if="item.type=='video'"
						:src="item.url"
						style="width: 100%;height:100%"
						/>
						<image
						v-if="item.type=='img'"
						:src="item.url"
						class="slide-image"
						mode="aspectFill"
						@click="previewImg(item.url)"
						/>
					</swiper-item>
				</block>
			</swiper>
			<!--<swiper-->
			<!--indicatorDots="true"-->
			<!--interval="3000"-->
			<!--:autoplay="ifautoplay"-->
			<!--@change="swiperChange"-->
			<!--:circular="true"-->
			<!--&gt;-->
			<!--<block v-for="(item, index) in swiperList" :key="index">-->
			<!--<swiper-item>-->
			<!--<div class="swiper-item">-->
			<!--<video :id="item.id" @play="playVideo(item.id)" v-if="item.type=='video'" :src="item.url" style="width: 100%;height:550rpx" />-->
			<!--<img v-if="item.type=='img'" :src="item.url" class="slide-image">-->
			<!--</div>-->
			<!--</swiper-item>-->
			<!--</block>-->
			<!--</swiper>-->
			<!-- <swiper class="swiper-wrapper" :options="ProductConSwiper" v-if="imgUrls.length > 0">
		  <swiperSlide class="swiper-slide" v-for="item in imgUrls" :key="item" ref="goodSwiper">
		    <img :src="item" class="slide-image" />
		  </swiperSlide>
		</swiper>-->
			<div class="pages" style="bottom: 3rem;">{{ currents || 1 }}/{{ swiperImages.length || 1 }}</div>
		</div>
	</view>
</template>
<script>
	// import { swiper, swiperSlide } from "vue-awesome-swiper";

	export default {
		name: "ProductConSwiper",
		components: {
			// swiper,
			// swiperSlide
		},
		props: {
			imgUrls: {
				type: Array,
				default: () => []
			},
			videoUrl: {
				type: String,
				default: ""
			},
			styleConfig: {
				type: Object,
				default: () => {}
			}
		},
		data: function() {
			return {
				nowPlay: "", //正在播放的视频id
				ifautoplay: true, //是否自动播放轮播
				currents: 1,
				currentTime: 0 // video播放进度
				// ProductConSwiper: {
				//   autoplay: {
				//     disableOnInteraction: false,
				//     delay: 2000
				//   },
				//   loop: true,
				//   speed: 1000,
				//   observer: true,
				//   observeParents: true,
				//   on: {
				//     slideChangeTransitionStart: function() {
				//       that.currents = this.realIndex + 1;
				//     }
				//   }
				// }
			};
		},
		computed:{
			boxStyle() {
				console.log(this.styleConfig)
				if (this.styleConfig && this.styleConfig.swipperSetting == '1') {
					return `margin-top:${this.styleConfig.swipperMarginTop}px;padding:${this.styleConfig.swipperPadding}px;height:${this.styleConfig.height}px`
				} else {
					return ""
				}
			},
			swiperImages(){
				let list = [];
				if (this.videoUrl) {
					let swiperItem = {
						id: this.videoUrl,
						type: "video",
						url: this.videoUrl
					};
					list.push(swiperItem);
					return list;
				}
				
				this.imgUrls.forEach((item, index) => {
					let swiperItem = {
						id: "img" + index,
						type: "img",
						url: item
					};
					list.push(swiperItem);
				});
				return list;
			}
		},
		onUnload() {
			this.currents = 1;
		},
		methods: {
			handleChange(event) {
				this.currents = event.mp.detail.current + 1;
				if (this.nowPlay) {
					//wx.createVideoContext(string,this)参数必须为字符串
					let beforevideoCtx = wx.createVideoContext(this.nowPlay, this);
					let index = this.swiperList.findIndex(item => item.id == this.nowPlay);
					beforevideoCtx.seek(this.currentTime);
					if (index === event.mp.detail.current) {
						beforevideoCtx.play();
						this.$set(this, "ifautoplay", false);
						return;
					}
					beforevideoCtx.pause();
				}
				this.$set(this, "ifautoplay", true);
			},
			// 监听video播放进度
			timeUpdate(e) {
				// parseInt(
				let currentTime = e.mp.detail.currentTime;
				this.$set(this, "currentTime", currentTime);
				//  console.log('video播放进度：' + currentTime)
			},
			//预览选择的图片
			previewImg: function(e) {
				console.log("预览的图片信息", e);
				var imgUrl = e; //获取当前点击的图片
				var imgArr = this.imgUrls;
				wx.previewImage({
					current: imgUrl, //当前图片地址
					urls: imgArr, //所有要预览的图片的地址集合数组形式
					// urls: [imgUrl], //一张图写法
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},
			playVideo(id) {
				this.nowPlay = id;
				this.$set(this, "ifautoplay", false);
			},
			swiperChange() {
				if (this.nowPlay) {
					//wx.createVideoContext(string,this)参数必须为字符串
					var beforevideoCtx = wx.createVideoContext(this.nowPlay, this);
					beforevideoCtx.pause();
				}
				this.$set(this, "ifautoplay", true);
			}
		}
	};
</script>
